<template>
  <div style="margin-top: 20px;">
    <el-row :gutter="15">
      <el-form
        ref="searchForm"
        :model="searchData"
        size="medium"
        label-width="100px"
      >
        <el-col :span="8">
          <el-form-item label="姓名" prop="name">
            <el-autocomplete
              v-model="searchData.name"
              :fetch-suggestions="getNameData"
              placeholder="请输入姓名"
              @select="getChoose"
              clearable
            ></el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="证件号码" prop="idCard">
            <el-input
              v-model="searchData.idCard"
              placeholder="请输入证件号码"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机号码" prop="tel">
            <el-autocomplete
              v-model="searchData.tel"
              :fetch-suggestions="getTelData"
              placeholder="请输入手机号码"
              @select="getChoose"
              clearable
            ></el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开始时间" prop="beginTime">
            <el-date-picker v-model="searchData.beginTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{width: '100%'}" placeholder="请选择开始时间" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker v-model="searchData.endTime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :style="{width: '100%'}" placeholder="请选择结束时间" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

    <el-table
      :data="dataList"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      v-show="dataList.length > 0"
    >
      <el-table-column label="id" prop="id" align="center" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="patientName" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.patientName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="消费金额" prop="orderAmount" align="center" width="100">
        <template slot-scope="{ row }">
          <span>{{ row.orderAmount }}</span>
        </template>
      </el-table-column>

      <el-table-column label="消费日期" prop="orderDate" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.orderDate }}</span>
        </template>
      </el-table-column>

      <el-table-column label="消费情况" prop="payResult" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.payResult }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" prop="id" align="center">
        <template slot-scope="{ row }">
          <el-button type="primary">查询详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="searchData.totalCount > 0"
                :total="searchData.totalCount > 0 ? searchData.totalCount:0"
                :page.sync="searchData.page"
                :limit.sync="searchData.pageSize"
                @pagination="submitForm"
    />


  </div>
</template>
<script>
  import {getPatients, addPatients} from "@/api/patient";
  import {getSomeoneOrders} from "@/api/order"
  import Pagination from "@/components/Pagination";

  let gender = {1: "男", 2: "女"};
  export default {
    components: {Pagination},
    props: [],
    data() {
      return {
        dataList: [],
        searchData: {
          name: "",
          idCard: "",
          appointmentId: "",
          tel: "",
          page: 0,
          totalCount: 0,
          totalPage: 1,
          pageSize: 10
        },
        addData: {
          name: "",
          gender: "",
          tel: "",
          idCard: "",
          addr: "",
          birth: '',
          remark: "",
        },
        addRules: {
          name: [{
            required: true,
            message: '请输入姓名',
            trigger: 'blur'
          }],
          gender: [{
            required: true,
            message: '请选择性别',
            trigger: 'change'
          }],
          tel: [{
            required: true,
            message: '请输入手机号码',
            trigger: 'blur'
          }, {
            pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
            message: '手机号码格式错误',
            trigger: 'blur'
          }],
          idCard: [],
          addr: [],
          birth: [],
          remark: [],
        },
        genderOptions: [{
          "label": "男",
          "value": 1
        }, {
          "label": "女",
          "value": 2
        }],
      };
    },
    computed: {},
    watch: {},
    created() {
      this.submitForm()
    },
    mounted() {
    },
    filters: {},
    methods: {
      geTel(tel) {
        var reg = /^(\d{3})\d{4}(\d{4})$/;
        return tel.replace(reg, "$1****$2");
      },
      remote(data, cb) {
        let _that = this;
        getPatients(data).then(response => {
          if (response.code === 200) {
            let data = response.page.list;
            data.filter(function (a) {
              a.value = a.name + "-" + _that.geTel(a.tel);
            });
            cb(data);
          }
        });
      },
      //查询病人信息select
      getNameData(queryString, cb) {
        this.remote({name: queryString}, cb);
      },
      //查询病人信息select
      getTelData(queryString, cb) {
        this.remote({tel: queryString}, cb);
      },
      //获取病人名字查询
      getChoose(val) {
        this.searchData = val;
        this.searchData.patientId = val.id;
        this.searchData.card = val.idCard;
        this.searchData.phone = val.tel;
        this.searchData.tel = this.geTel(val.tel);

        if (!val.idCard || val.idCard.length === 0) {
          this.searchData.idCard = ""
        }
        // 15位身份证举例：130503 670401 001的含义; 13为河北，05为邢台，03为桥西区，出 生日期为1967年4月1日，顺序号为001。
        else if (val.idCard.length === 15) {
          this.searchData.idCard = idcard.replace(/(\d{6})\d{6}(\d{3})/, "$1******$2");
        } else {
          this.searchData.idCard = val.idCard.replace(/(\d{5})\d{6}(\d{6})/, "$1******$2");
        }
        this.searchData.page = 0;
        this.searchData.pageSize = 10;
        this.submitForm()
      },
      submitForm() {
        getSomeoneOrders(this.searchData).then(response => {
          if (response.code === 200) {
            this.dataList = response.page.list;
            this.searchData.page = response.page.currPage;
            this.searchData.totalPage = response.page.totalPage;
            this.searchData.totalCount = response.page.totalCount;
          }
        });
      },
      resetForm() {
        this.$refs["searchForm"].resetFields();
        this.dataList = [];
        this.searchData.page = 0;
        this.searchData.pageSize = 10;
      },
    }
  };
</script>
<style>
  .el-autocomplete {
    width: 100%;
  }
</style>
